<template>
  <div class="dashboard"  v-loading="loading">
    <!-- 统计数据 -->
    <el-row class="top">
      <el-col :span="10" class="left">
        <el-card class="card total-amount-card">
          <div class="left-center">
            <div>总金额</div>
            <div>￥{{ stats.orderTotalAmount }}</div>
            <div>({{ stats.orderTotalNum }} 单)</div>
          </div>
          <div class="left-bottom">
            <div>
              <div>今日￥{{ stats.todayIncome }}</div>
              <div>订单({{ stats.todayOrderNum }} 单)</div>
            </div>
            <div></div>
            <div>
              <div>本月￥{{ stats.monthIncome }}</div>
              <div>订单({{ stats.monthOrderNum }} 单)</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="10" class="right">
        <el-card class="card">
          <div class="right-top">
            <!--            <div>👥</div>-->
            <div><i class="el-icon-user-solid"></i></div>
            <div class="right-right">
              <div>{{ stats.userTotalNum }}</div>
              <div>用户总数</div>
            </div>
          </div>
          <div class="right-bottom">
            <div><i class="el-icon-user-solid"></i></div>
            <div class="right-right">
              <div>{{ stats.expertTotalNum }}</div>
              <div>专家总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- 左边：收益图表 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="chart-title">平台一周收益统计</div>
          <div ref="revenueChart" class="chart" style="height: 400px;"></div>
        </el-card>
      </el-col>

      <!-- 右边：专家收益排行 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="chart-title">专家收益排行（前20）</div>
          <el-table
            :data="expertRankList"
            style="width: 100%"
            border
            height="400"
          >
            <el-table-column label="排名" type="index" width="60" align="center" />
            <el-table-column label="专家ID" prop="userId" align="center" />
            <el-table-column label="专家姓名" prop="name" align="center" />
            <el-table-column label="总收益" prop="income" align="center">
              <template slot-scope="scope">
                ￥{{ scope.row.income }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!--    <div>-->
    <!--      <img :src="qrCodeUrl" alt="二维码" />-->
    <!--    </div>-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Dashboard',
  data() {
    return {
      stats: {
        monthIncome: null,
        monthOrderNum: null,
        todayIncome: null,
        todayOrderNum: null,
        orderTotalAmount: null,
        orderTotalNum: null,
        userTotalNum: null,
        expertTotalNum: null
      },

      // qrCodeUrl: "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQFx8DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyTUI0eWQ0ZVdhRC0xekhya2hFY3UAAgRr4YpoAwSAOgkA",
      expertRankList: [
        // { "name": "专家A", "income": 12000 },
        // { "name": "专家B", "income": 10500 }
      ],
      weekIncome: [],
      loading: true,
      days: []
    }
  },
  mounted() {
    // this.initChart()
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getStatisticsData().then(res => {
        this.stats = res.data
        this.weekIncome = Object.values(res.data.weekIncome || {})
        this.days = Object.keys(res.data.weekIncome || {})
        this.expertRankList = res.data.expertList
        this.$nextTick(() => {
          this.initChart()
          this.loading = false
        })
      }).catch(() => {
        this.loading = false
      })
    },
    initChart() {
      const chart = echarts.init(this.$refs.revenueChart)
      const option = {
        title: {
          text: '平台一周收益',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.days,
          axisLabel: { rotate: 45 }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '￥{value}'
          }
        },
        series: [{
          name: '收益',
          data: this.weekIncome,
          type: 'line',
          smooth: true,
          areaStyle: {
            color: 'rgba(93, 179, 236, 0.2)'
          },
          lineStyle: {
            color: '#5db3ec',
            width: 2
          },
          itemStyle: {
            color: '#5db3ec'
          }
        }]
      }
      chart.setOption(option)
    }
  }
}

import { getStatisticsData } from "@/api/finance/finance"
</script>

<style scoped lang="scss">
.dashboard {
  padding: 20px;
}

/* 收益图表 */
.chart-card {
  margin-top: 20px;
}
.chart {
  width: 100%;
  height: 400px;
}

/* 左侧容器，蓝色背景，高度固定，圆角 */
.left {
  background: #f1fbff;
  height: 350px;
  margin: 50px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

/* 左侧卡片撑满父容器，背景透明无阴影 */
.left > .card {
  flex: 1;
  padding: 20px;
  background: transparent;
  box-shadow: none;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 左侧内容 */
.left-center {
  display: flex;
  flex-direction: column;
  align-items: center;

  > div:nth-child(1) {
    font-size: 20px;
    color: #9a9a9b;
    margin-bottom: 20px;
  }

  > div:nth-child(2) {
    font-size: 35px;
    font-weight: bold;
    color: #000;
    margin-bottom: 20px;
  }

  > div:nth-child(3) {
    font-size: 20px;
    color: #9a9a9b;
  }
}

.left-bottom {
  margin-top: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 20px;
  color: #999;

  > div:nth-child(1), > div:nth-child(3) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  > div:nth-child(2) {
    width: 2px;
    height: 60px;
    background: #999;
  }
}

/* 右侧容器 */
.right {
  height: 350px;
  margin: 50px;

  .card {
    height: 100%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .right-top, .right-bottom {
    height: 50%;
    display: flex;
    align-items: center;
  }

  .right-top > div:nth-child(1) {
    width: 100px;
    height: 100px;
    background: #e757fa;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
    margin-right: 20px;
  }

  .right-bottom > div:nth-child(1) {
    width: 100px;
    height: 100px;
    background: #55aee9;
    border-radius: 15px;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-right: 20px;
  }

  .right-right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 130px;

    > div:nth-child(1) {
      font-size: 35px;
      font-weight: bold;
      color: #000;
    }

    > div:nth-child(2) {
      font-size: 20px;
      color: #000;
      margin-left: 10px;
    }
  }
}
.chart-card {
  margin-top: 20px;
  .chart-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
}


</style>
